<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>日志</title>
<link rel="stylesheet" type="text/css" href="../Styles/bootstrap-3.3.7-dist/css/bootstrap.min.css" />
<script type="text/javascript" src="../Scripts/jquery.min.js"></script>
<script type="text/javascript" src="../Styles/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="../Styles/laypage/laypage.js"></script>
<script type="text/javascript" src="../Scripts/vue.min.js"></script>
    <style>
        h2{
            padding-left: 7%;
        }
        .main{
            width: 60%;
            margin-left: 10%;
        }
        .sendMail-1{
            margin-top: 6px;
        }
    </style>
</head>
<body>
<div>
    <h2>邮件管理</h2>
   <div class="main">
       <ul id="myTab" class="nav nav-tabs">
           <li class="active">
               <a href="#sendMail" data-toggle="tab" >
                   发件箱
               </a>
           </li>
           <li>
               <a href="#ios" data-toggle="tab" v-on:click="getReplyList()">
                   收件箱
               </a>
           </li>

       </ul>
       <div id="myTabContent" class="tab-content">
           <div class="tab-pane fade in active" id="sendMail">
              <div class="sendMail-1">
                  <button class="btn btn-success" id="addemail">发邮件</button>
                  &nbsp;&nbsp;&nbsp;
                  <button class="btn btn-danger empty" id="delete">删除邮件</button>
              </div>
               <div class="sendMail-1">
                   <table class="table" id="email_table">
                       <tr>
                           <th><input type="checkbox" class="checkall" /></th>
                           <th>主题</th>
                           <th>收件人</th>
                           <th>时间</th>
                           <th>操作</th>
                       </tr>
                       <tr v-for="mail in emailList">
                        
                          <td><input type="checkbox" name="checkbox"  value="{{mail.eid}}"/></td>
                          <td>{{mail.etitle}}</td>
                          <td>{{mail.edirection_id}}</td>
                          <td>{{mail.stime}}</td>
                          <td><input type="hidden" value=""><button type="button" class="btn btn-default btn-xs lookemail" v-bind:value=mail.eid>查看</button></td>
                       </tr>

                   </table>
                   <div id="layPage"></div>
               </div>
           </div>
           <div class="tab-pane fade" id="ios">
              <div class="sendMail-1">
                   <button class="btn btn-danger empty2" id="delete">删除邮件</button>    
              </div>
              <div class="sendMail-1" id="receive_mail">
                  <table class="table table-bordered">
                     <tr>
                       <th><input type="checkbox" class="checkall2" /></th>
                       <td>主题</td>
                       <td>发件人</td>
                       <td>时间</td>
                       <td>状态</td>
                       <td>操作</td>
                     </tr>
                     <tr v-for="receive in receiveList">
                      <td><input type="checkbox" name="checkbox2" value="{{receive.eid}}"/></td>
                       <td>{{receive.etitle}}</td>
                       <td>{{receive.uname}}</td>
                       <td>{{receive.stime}}</td>
                       <td>{{receive.rstate}}</td>
                       <td><input type="hidden" value="{{receive.rstate}}"><button type="button" class="btn btn-default btn-xs lookemail" v-bind:value=receive.eid>查看</button></td>
                     </tr>
                  </table>
                  <div id="demo"></div>
              </div>
           </div>
       </div>
       
       	<div class="modal fade  tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"  id="look-details">
					<div class="modal-dialog" role="document">
						<div class="modal-content">
							<div class="modal-header">
								<button type="button" class="close" data-dismiss="modal" aria-label="Close">
									<span aria-hidden="true">&times;</span>
								</button>
								<h4 class="modal-title">信息浏览</h4>
							</div>
							<div class="modal-body" id="see_email">
							  <table class="table table-bordered">
							      <tr>
							         <td>主题</td>
							         <td>{{mail.etitle}}</td>
							      </tr>
							      <tr>
							         <td>时间</td>
							         <td>{{mail.stime}}</td>
							      </tr>
							      <tr>
							         <td>内容</td>
							         <td>
							           <textarea cols="50" rows="10" name="econtent" id="wcontent">{{mail.econtent}}</textarea>
							         </td>
							      </tr>
							  </table>						
							</div>
							<div class="modal-footer" >	
							   <button type="button" class="btn btn-primary" data-dismiss="modal">关闭</button>
							</div>
						</div>
						<!-- /.modal-content -->
					</div>
					<!-- /.modal-dialog -->
				</div>
       
   </div>
</div>
<script type="text/javascript">
  $(function(){
	  $('#myTab li:eq(0) a').tab('show');
	  var currentPage=1;
	  
	  $("#addemail").click(function(){ 
		  window.location.href="addemail.jsp";
	  })
	  
	  var vue = new Vue({
		  el:"#email_table",
		  data:{emailList:""},
		  methods:{
			  getEmailList : function(){
				  var _self = this;
				  $.ajax({
					  url:'../getMyEmail',				  
					  type:'post',
					  data:{'currentPage':currentPage},
					  dataType:'json',
					  success : function(result){
						  console.log(result);
						  _self.emailList = result.emailList;
						  
							laypage({
        						cont:$("#layPage"),//分页内容所有显示的容器位置 
        						pages:result.mixNum,//分页显示的总页数
        						curr:currentPage,//当前页
       						 skin:'molv',//皮肤
       						 skip:true,//支持跳页的功能
       						 last:'尾页',
       						 groups:result.limit, 
       						 jump:function(obj,first){//触发分页后的回调
       							 currentPage=obj.curr;
       							 if(!first){//一定要加此判断，否则初始时会无限刷新
       								vue.getEmailList();//获取当前页
       							  }
        						 }
        					});
					  }
					  
				  })
			  }
		  }
	  })
	  vue.getEmailList();
	  
	  var current = 1;
	  var vue2 = new Vue({
		  el:"#receive_mail",
		  data:{receiveList:""},
		  methods:{
			  getReplyList:function(){
				  var _self = this;
				  $.ajax({
					  url:'../getReceiveMyEmail',
					  type:'post',
					  data:{"currentPage":current},
					  dataType:'json',
					  success :function(result){
						  console.log(result);
						  _self.receiveList = result.receiveList;
						  
							laypage({
        						cont:$("#demo"),//分页内容所有显示的容器位置 
        						pages:result.mixNum,//分页显示的总页数
        						curr:current,//当前页
       						 skin:'molv',//皮肤
       						 skip:true,//支持跳页的功能
       						 last:'尾页',
       						 groups:result.limit, 
       						 jump:function(obj,first){//触发分页后的回调
       							current=obj.curr;
       							 if(!first){//一定要加此判断，否则初始时会无限刷新
       								vue2.getReplyList();//获取当前页
       							  }
        						 }
        					});
					  }				 
			  })
		   }
	    }
	  })
	  vue2.getReplyList();
	  
	  var rstate;
	  var eid;
	  
	  
	  
	  $(".main").on('click','.lookemail',function(){
		  eid = $(this).val();
		  rstate = $(this).parent("td").children("input").val();
		  console.log(eid+"+++++++++"+rstate)
		  $("#look-details").modal("show");
		  vue3.getOneEmail();
	  })
	  
	  var vue3 = new Vue({
		  el:"#see_email", 
		  data:{mail:""},
		  methods:{			  
			  getOneEmail: function(){
				  var _self = this;
				  $.ajax({
					  url:'../getEmailByid',
					  type:'post',
					  data:{'rstate':rstate,'eid':eid},
					  dataType:'json',
					  success : function(result){
						  console.log(result);
						  _self.mail = result;
						  if(rstate=="未读"){
							  vue2.getReplyList();
						  }
					  }
				  })
			  }
		  }
	  })
	  
	  //全选
	  $(".checkall").on("click",function() { 
			 
			if ($(this).prop("checked") == true) {
				$("input[name='checkbox']").each(function() {
					$(this).prop("checked", true);
				});
			}
			else {  
				$("input[name='checkbox']").each(function() {  
					$(this).prop("checked", false);  
				});  
			}  
		}); 
	  $(".checkall2").on("click",function() { 
			 
			if ($(this).prop("checked") == true) {
				$("input[name='checkbox2']").each(function() {
					$(this).prop("checked", true);
				});
			}
			else {  
				$("input[name='checkbox2']").each(function() {  
					$(this).prop("checked", false);  
				});  
			}  
		}); 
	  
	  //批量删除1
		 $(".main").on('click','.empty', function(){
			 var text="";
			 $("input[name='checkbox']").each(function(){
				 if($(this).prop("checked")==true){
					 text +=$(this).val()+",";
				 }
			 })
			 console.log(text);
		   if(confirm("确认删除")){
			   delectAll(text);
			 } 
		 })
		 //批量删除2
		  $(".main").on('click','.empty2', function(){
			 var text="";
			 $("input[name='checkbox2']").each(function(){
				 if($(this).prop("checked")==true){
					 text +=$(this).val()+",";
				 }
			 })
			 console.log(text);
			 if(confirm("确认删除")){
				   $.ajax({
					   url:'../delectMyReceiveEmail',
					   type:'post',
					   data:{'text':text},
					   dataType:'json',
					   success : function(result){
						   if(result==true){
								  alert("删除成功");
								  current = 1;
								  vue2.getReplyList();
							  }
					   }
				   })
			 } 
			 
		 })
	  
		function delectAll(text){
		  console.log(text);
		  $.ajax({
			  url:'../delectMySendEmail',
			  type:'post',
			  data:{'text':text},
			  dataType:'json',
			  success:function(result){
				  if(result==true){
					  alert("删除成功");
					  currentPage = 1;
					  vue.getEmailList();
				  }
			  }
		  })
	  }
	  
	  
  })
</script>
<script type="text/javascript">
</script>

</body>
</html>